:root {
    --color-scheme: light;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-primary: #409eff;
    --color-primary-light-3: #79bbff;
    --color-primary-light-5: #a0cfff;
    --color-primary-light-7: #c6e2ff;
    --color-primary-light-8: #d9ecff;
    --color-primary-light-9: #ecf5ff;
    --color-primary-dark-2: #337ecc;
    --color-success: #67c23a;
    --color-success-light-3: #95d475;
    --color-success-light-5: #b3e19d;
    --color-success-light-7: #d1edc4;
    --color-success-light-8: #e1f3d8;
    --color-success-light-9: #f0f9eb;
    --color-success-dark-2: #529b2e;
    --color-warning: #e6a23c;
    --color-warning-light-3: #eebe77;
    --color-warning-light-5: #f3d19e;
    --color-warning-light-7: #f8e3c5;
    --color-warning-light-8: #faecd8;
    --color-warning-light-9: #fdf6ec;
    --color-warning-dark-2: #b88230;
    --color-danger: #f56c6c;
    --color-danger-light-3: #f89898;
    --color-danger-light-5: #fab6b6;
    --color-danger-light-7: #fcd3d3;
    --color-danger-light-8: #fde2e2;
    --color-danger-light-9: #fef0f0;
    --color-danger-dark-2: #c45656;
    --color-error: #f56c6c;
    --color-error-light-3: #f89898;
    --color-error-light-5: #fab6b6;
    --color-error-light-7: #fcd3d3;
    --color-error-light-8: #fde2e2;
    --color-error-light-9: #fef0f0;
    --color-error-dark-2: #c45656;
    --color-info: #909399;
    --color-info-light-3: #b1b3b8;
    --color-info-light-5: #c8c9cc;
    --color-info-light-7: #dedfe0;
    --color-info-light-8: #e9e9eb;
    --color-info-light-9: #f4f4f5;
    --color-info-dark-2: #73767a;
    --bg-color: #ffffff;
    --bg-color-page: #f2f3f5;
    --bg-color-overlay: #ffffff;
    --text-color-primary: #303133;
    --text-color-regular: #606266;
    --text-color-secondary: #909399;
    --text-color-placeholder: #a8abb2;
    --text-color-disabled: #c0c4cc;
    --border-color: #dcdfe6;
    --border-color-light: #e4e7ed;
    --border-color-lighter: #ebeef5;
    --border-color-extra-light: #f2f6fc;
    --border-color-dark: #d4d7de;
    --border-color-darker: #cdd0d6;
    --fill-color: #f0f2f5;
    --fill-color-light: #f5f7fa;
    --fill-color-lighter: #fafafa;
    --fill-color-extra-light: #fafcff;
    --fill-color-dark: #ebedf0;
    --fill-color-darker: #e6e8eb;
    --fill-color-blank: #ffffff;
    --box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
    --box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
    --box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
    --box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12),
        0px 8px 16px -8px rgba(0, 0, 0, 0.16);
    --disabled-bg-color: var(--fill-color-light);
    --disabled-text-color: var(--text-color-placeholder);
    --disabled-border-color: var(--border-color-light);
    --overlay-color: rgba(0, 0, 0, 0.8);
    --overlay-color-light: rgba(0, 0, 0, 0.7);
    --overlay-color-lighter: rgba(0, 0, 0, 0.5);
    --mask-color: rgba(255, 255, 255, 0.9);
    --mask-color-extra-light: rgba(255, 255, 255, 0.3);
    --border-width: 1px;
    --border-style: solid;
    --border-color-hover: var(--text-color-disabled);
    --border: var(--border-width) var(--border-style) var(--border-color);
    --svg-monochrome-grey: var(--border-color);
}

body,
blockquote,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

i {
    font-style: normal;
}

html,
body {
    width: 100%;
    height: 100%;
    font-size: 14px;
    -webkit-text-size-adjust: none;
    max-width: 100%;
    overflow-x: hidden;
    vertical-align: top;
    font-family: Arial, Helvetica, sans-serif;
    touch-action: none;
    /* user-select: none; */
    color: var(--text-color-primary);
}

ul {
    list-style: none;
}

#app {
    width: 100%;
    height: 100%;
}

.el-dialog .el-dialog__header {
    margin: 0;
}

.custom-dialog .el-dialog__body {
    padding: 16px;
}

.upload-credentials .el-upload {
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.upload-credentials .el-upload:hover {
    border-color: var(--color-primary);
}

.el-icon.upload-credentials-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.login-input {
    width: 100%;
    height: 84px;
}
.login-input .el-button {
    height: 64px;
}
.login-input .el-input__inner {
    height: 64px;
}

.custom-button {
    color: #409eff;
    cursor: pointer;
    margin-right: 12px;
}
.custom-button.delete {
    color: #f56c6c;
}

.custom-button.create {
    color: var(--color-success);
}

.custom-button.disabled {
    color: var(--color-primary-light-5);
    cursor: no-drop;
}

.el-dialog.custom-dialog {
    border-radius: 8px;
}
.custom-dialog .el-dialog__body {
    padding: 0 20px 20px 20px;
}
.el-table .el-table__footer-wrapper td.el-table__cell div {
    white-space: pre-line;
    font-weight: bold;
}

.button {
    padding: 6px 16px;
    border-radius: 4px;
    display: inline-block;
    color: var(--text-color-regular);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.button:hover {
    color: var(--color-primary);
}
.button.border {
    border: 1px solid #dcdfe6;
}
.button.border:hover {
    border: 1px solid var(--color-primary);
}
.button.disabled,
.button.disabled:hover {
    cursor: no-drop;
    border-color: #e4e7ed;
    color: #a8abb2;
}

* {
    scrollbar-color: var(--el-scrollbar-bg-color) var(--el-fill-color-light);
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar:horizontal {
    height: 6px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #0003;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background-color: rgba(26, 106, 211, 0.302);
}

.page-box {
    background-color: #fff;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 8px;
}

.box {
    background-color: #fff;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 8px;
}
